<template>
  <div class="height-full">
    <div class="ml10 d-flex flex-ju-sb flex-a-c">
      <div class="title-line list-caption">入池稿件</div>

      <div>
        <Tooltip
          v-permission="'article/spread/instruct'"
          content="请选择数据"
          :disabled="Boolean(selection.length)"
          placement="top"
          theme="light"
        >
          <Button type="primary" @click="handleBatchAudit">批量下发</Button>
        </Tooltip>
        <!-- <Button type="primary" class="ml14" @click="visible.manu = true">录入稿件</Button> -->
      </div>
    </div>

    <div class="list-filter mt10">
      <Form class="custom-ivu-form" inline :label-width="80" @submit.native.prevent="handleFormSubmit">
        <FormItem label="所属主题">
          <Select v-model="formData.theme" class="form-item--width" clearable @on-change="handleFormSubmit">
            <Option v-for="(nt, i) of themeList" :key="i" :value="nt.key">{{ nt.value }}</Option>
          </Select>
        </FormItem>

        <FormItem label="产品分类">
          <Select
            v-model="formData.product"
            class="form-item--width"
            element-id="select2"
            clearable
            @on-change="handleFormSubmit"
          >
            <Option v-for="(nt, i) of productList" :key="i" :value="nt.key">{{ nt.value }}</Option>
          </Select>
        </FormItem>

        <FormItem>
          <template #label>
            <KeywordsSelect
              :keyword.sync="keyword"
              :keywords="[
                { key: 'title', value: '标题' },
                { key: 'organ', value: '来源' },
              ]"
            ></KeywordsSelect>
          </template>
          <Input
            v-model="formData[keyword.key]"
            :label-width="60"
            placeholder="请输入"
            class="form-item--width"
            size="large"
            clearable
          ></Input>
        </FormItem>

        <FormItem label="时间范围" class="width-auto">
          <!--  <Select v-model="formData.timeType" class="form-item--width" clearable @on-change="handleTimeTypeChange">
            <Option v-for="(it, i) of dateOptions" :key="i" :value="it.key">{{ it.value }}</Option>
          </Select>

          <DatePicker
            v-show="formData.timeType === '自定义'"
            type="daterange"
            ref="daterange_ref"
            placeholder="请选择"
            style="width: 210px"
            :options="datePickerOptions"
            @on-change="handleTimeRange"
          ></DatePicker> -->

          <TimeRange
            v-model="formData.timeType"
            @on-time-type-change="handleTimeTypeChange"
            @on-date-range-change="handleTimeRange"
          />
        </FormItem>

        <Button class="btn-search" type="primary" html-type="submit">查询</Button>
      </Form>
    </div>

    <div class="list-table-box mt12">
      <div class="list-caption f16">稿件列表</div>

      <CommonTablePage
        :loading="tableLoading"
        :columns="columns"
        :tableData="tableData"
        :total="pagination.total"
        :current="formData.pageNo"
        @on-selection-change="handleTableSelect"
        @on-sort-change="handleTableSort"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
      ></CommonTablePage>
    </div>

    <ModalAdoptList :visible.sync="visible.list" :id="articleId"></ModalAdoptList>
    <!--  <ModalUploadManu
      :visible.sync="visible.manu"
      ref="modalUploadRef"
      end="manage"
      @on-submit="handleModalUploadSubmit"
    ></ModalUploadManu> -->
  </div>
</template>

<script>
// components
import KeywordsSelect from '@/components/common/KeywordsSelect/KeywordsSelect'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModalUploadManu from '@/components/common/ModalUploadManu/ModalUploadManu'
import ModalAdoptList from '@/components/common/ModalAdoptList/ModalAdoptList'
import TimeRange from '@/components/customFrom/TimeRange'
// import ModalAdoptList from './Components/ModalAdoptList.vue'
// util
import { createCommonPagination, createForm } from '@/utils/service.js'
import { createColumns } from './service'
import { setEntryManuIssue, setEntryManuEffect } from '@/utils/storage.js'

import mixin from './mixin'
export default {
  name: 'EntryManuscript',

  components: { KeywordsSelect, CommonTablePage, ModalUploadManu, ModalAdoptList, TimeRange },

  mixins: [mixin],

  data() {
    return {
      formData: createForm(),
      keyword: { key: 'title', value: '标题' },

      columns: createColumns(this),
      tableData: [],
      selection: [],
      tableLoading: false,

      pagination: createCommonPagination(),

      articleId: '',

      visible: {
        list: false,
        manu: false,
      },
    }
  },

  computed: {
    themeList() {
      return this.$store.getters.themeList
    },
    productList() {
      return this.$store.getters.productList
    },
    /* stateList() {
      return this.$store.getters['provideEnd/stateList']
    }, */
  },

  watch: {
    'keyword.key'(v) {
      if (v === 'title') {
        // this.formData.username = ''
        this.formData.organ = ''
      } else {
        this.formData.title = ''
      }
    },
  },

  methods: {
    handleBatchAudit() {
      // console.log(this.selection)
      if (!this.selection.length) return
      this.handleIssueDirective(this.selection)
    },

    handleModalUploadSubmit(data) {
      this.pendingReviewManuAdd(data)
    },

    handleTimeRange(date) {
      this.formData.startTime = date[0]
      this.formData.endTime = date[1]
      this.handleFormSubmit()
    },

    handleTimeTypeChange(v) {
      if (v === '自定义') {
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        this.handleFormSubmit()
      }
    },

    handleFormSubmit(no_reset) {
      if (no_reset !== true) {
        this.formData.pageNo = 1
      }
      this.getManuEntryList({ ...this.formData })
    },

    handleTableSelect(selection) {
      this.selection = selection
    },

    handleTableSort({ column, key, order }) {
      // console.log(123, column, key, order)
      if (order === 'normal') {
        this.formData.orderField = 'createTime'
        this.formData.desc = true
      } else {
        this.formData.orderField = key
        this.formData.desc = order === 'desc'
      }
      this.handleFormSubmit()
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.handleFormSubmit(true)
    },
    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.handleFormSubmit(true)
    },

    /* 操作 */
    handleEffectAssess(row) {
      // console.log('handleEffectAssess', row)
      setEntryManuEffect(row)
      this.$router.push({ name: 'manuEffectAssess', query: { id: row.id } })
    },

    handleIssueDirective(rows) {
      // console.log('handleIssueDirective', row)
      setEntryManuIssue(Array.isArray(rows) ? rows : [rows])
      this.$router.push({ name: 'issueDirective', query: { f: 'issue' } })
    },

    viewAdoptList(row) {
      // console.log(row)
      this.articleId = row.id
      this.visible.list = true
    },
  },

  mounted() {
    this.handleFormSubmit()
  },
}
</script>

<style lang="less" scoped></style>
